<template>
  <div class="publish-container">
    <el-card>
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>文章管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 注意  :model="article" 这个必须要加  不能丢
                :rules="rules"  具体的校验规则
                 el-form-item  添加prop="title"  既需要和article中的title保持一致  又需要和rules中的字段名保持一致
      -->
      <el-form ref="articleForm" :rules="rules" :model="article" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model.trim="article.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!-- 模板中使用 放置富文本编辑器  这里使用v-model进行双向绑定  一旦编辑器内容变化  我们可以第一时间拿到当前的内容
          存放于article.content 属性中
          :options 用于设置编辑器配置项
          -->
          <quill-editor v-model="article.content" :options="editorOption"></quill-editor>
        </el-form-item>
        <el-form-item label="封面">
          <!--
             v-model 绑定的值 el-radio 的label值
          -->
          <el-radio-group v-model="article.cover.type">
            <!-- 根据后端接口约定 -->
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
          <!-- 单图  三图 显示    无图 自动 不显示-->
          <div class="coverBox" v-if="article.cover.type>0">
            <!-- 使用:key 进行组件的强制重新渲染  避免bug
            父传子
            -->
            <Cover
              class="coverBox"
              :picnum="article.cover.type"
              :key="article.cover.type"
              ref="cover"
              :image="article.cover.images"
            ></Cover>
          </div>
        </el-form-item>
        <el-form-item label="频道" prop="channel_id">
          <!--注意： 双向绑定绑定数据的是子项的value值 -->
          <el-select v-model="article.channel_id" placeholder="请选择频道">
            <!-- 
              :key  v-for 搭配  唯一性
              :label 代表下拉框的文案
              :value  代表实际的code码  将来要交给后端的数据
            -->
            <el-option
              v-for="channel in channels"
              :key="channel.id"
              :label="channel.name"
              :value="channel.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <!--draft: false 表示正式发布   true 表示存为草稿 -->
          <el-button type="primary" @click="hAddArticle(false)">发表</el-button>
          <el-button @click="hAddArticle(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 因为该组件是默认导出的  引入的时候不需要加 {}
import Cover from './Cover'
import { getChannels, updateArticle, getArticle } from "@/api/article"
//使用富文本编辑器  第一步 安装并引入 mount with component  一般导出 所以加{}
import { quillEditor } from "vue-quill-editor"
// require styles
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css"
export default {
  // 通过components选项注册局部组件
  components: { quillEditor, Cover },
  data() {
    //响应式数据申明的时候用于和后端通信的数据尽量保持和接口字段名称统一
    //减少不必要的数据处理
    return {
      channels: [],//频道列表
      article: {
        title: '', // 文章村里
        content: '', // 文章内容
        cover: {
          type: 0, // 封面图片的张数
          images: [], // 封面的地址
        },
        channel_id: '', // 频道id
      },
      //添加校验规则
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 5, max: 30, message: '长度在5到30之间', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
          { min: 20, max: 30000, message: '最少20个字', trigger: 'blur' }
        ],
        channel_id: [
          { required: true, message: '请选择文章频道', trigger: 'blur' }
        ]
      },
      //编辑器的配置项
      editorOption: {
        placeholder: '',//占位文字
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            ["blockquote", "code-block"],
            [{ header: 1 }, { header: 2 }],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ indent: "-1" }, { indent: "+1" }],
            ["image"]
          ]
        }
      }
    }
  },
  methods: {
    //获取频道数据
    hGetChannels() {
      getChannels().then(res => {
        // console.log(res)
        this.channels = res.data.data.channels
      }).catch(err => {
        console.log(err)
      })
    },
    hGetArticle() {
      //获取当前文章的id
      let id = this.$route.query.id.toString()
      // console.log(id)
      getArticle(id).then(res => {
        console.log(res.data.data.cover.images)
        this.article = res.data.data
      })

    },
    //修改文章后发布
    hAddArticle(isDraft) {
      //提交数据之前先进行校验 
      //valid 代表所有需要校验的字段都通过校验的时候 为true  只要有一个校验没通过就为false
      this.$refs['articleForm'].validate((valid) => {
        if (valid) {
          //做个判断  兼容无图情况下找不到Cover组件方法的bug
          if (this.article.cover.type > 0) {
            //调用Cover组件的方法 获取当前选中的图片  然后赋值给cover.images
            let images = this.$refs.cover.getPicList()
            this.article.cover.images = images
          }
          let id = this.$route.query.id.toString()
          updateArticle(isDraft, id, this.article).then(res => {
            // console.log(res)
            this.$message.success('发布成功')
            this.hGetArticle()
            this.$router.push({
              path: '/articles'
            }
            )
          })
        } else {
          return false
        }
      })
    }
  },
  mounted() {
    this.hGetChannels()
    this.hGetArticle()
  }
}
</script>
<style lang="less">
// 在父组件中去设置子组件的样式，加上/deep/ 实现穿透功能
.publish-container /deep/ .ql-editor {
  height: 300px;
}
.publish-container /deep/ .ql-toolbar.ql-snow {
  padding: 0 8px;
}
.coverBox {
  margin-bottom: 20px;
}
</style>